iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
自我挑戰組

開始入坑網頁吧!系列 第 23

JavaScript Callback(回呼)

  • 分享至 

  • xImage
  •  

Callback Function 回呼函數

A function you give to another function, to be run when the other function is finished

就是有一個函數a,給它一個函數b,當a結束,他呼叫函數b,就是回呼函數b的意思

舉個例子:

function greet(greeting){
 var greeting=greeting;
 
 setTimeout(function(){
 console.log(greeting);
 },3000);
}

greet('Hello!');

上面的範例呼叫greet函數後過了三秒才出現'Hello!',這使用到閉包與一級函數的概念。
閉包的概念是因為greet函數已經被執行完,但是裡面的greeting變數還在記憶體中,而因為有閉包,所以裡面的函數可以取用greeting變數

另外一個例子,大家常用的JQuery也使用到回呼函數概念
例如:

$('body').click(function(){
alert('hello');
})

click是個函數,裡面裝著另一個匿名函數當click的參數,click執行完則裡面函數被呼叫。

用 callback 解決的非同步的問題, 如果有很多 callback 串再一起
就會變成 callback hell,會很複雜,大家可以看看下面結果出來的順序

function greet1(callback) {
    setTimeout(() => {
        console.log("Done greet1")
        callback()
    }, 2000)
}
function greet2(callback) {
    setTimeout(() => {
        console.log("Done greet2")
        callback()
    }, 1000)
}
function greet3(callback) {
    setTimeout(() => {
        console.log("Done greet3")
        callback()
    }, 2000)
}
function main(callback) {
    greet1(() => {
        greet2(() => {
            greet3(() =>{
            callback()
            })
        })
    })
}
main(() => {
    console.log("All function is done.")
})
//Done greet1
//Done greet2
//Done greet3
//All function is done.

參考資料:
Summer。桑莫。夏天
Callback(回調)
callback, promise, async/await 使用方式教學以及介紹 Part I
重新認識 JavaScript: Day 18 Callback Function 與 IIFE


上一篇
JavaScript 閉包(Closure) 下集
下一篇
JavaScript Prototype (原型)
系列文
開始入坑網頁吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言